import React, { useRef, useEffect } from 'react'
import { Animated, Dimensions } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'

const style = EStyleSheet.create({
  container: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
  },
})

interface Props {
  toValue?: number
  children: React.ReactNode
}

const BottomToTop: React.FC<Props> = (props) => {
  const { toValue = 0, children } = props
  const { height } = Dimensions.get('window')
  const fadeAnim = useRef(new Animated.Value(height)).current // top初始值

  useEffect(() => {
    Animated.timing(
      // 随时间变化而执行动画
      fadeAnim, // 动画中的变量值
      {
        toValue, // 最终值
        duration: 500, // 让动画持续一段时间
        useNativeDriver: false,
      },
    ).start() // 开始执行动画
  }, [fadeAnim, toValue])

  return (
    <Animated.View
      style={[
        style.container,
        {
          top: fadeAnim,
        },
      ]}
    >
      {children}
    </Animated.View>
  )
}

export default BottomToTop
